<include file="Public/min-header"/>
<style>
    .presales_tr, .aftersales_tr {
        display: none;
    }
</style>
<div class="wrapper">
    <include file="Public/breadcrumb"/>
    <section class="content" style="padding:0px 15px;">
        <!-- Main content -->
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> 客服中心</h3>
                </div>
                <div class="panel-body ">
                    <!--表单数据-->
                    <form method="post" id="handlepost" action="{:U('Index/store_service')}">
                        <!--通用信息-->
                        <div class="tab-content">
                            <p class="text-warning">说明：客服信息需要填写完整，不完整信息将不会被保存。</p>
                            <div class="row" style="margin:20px auto;text-align:center;">
                                <table class="table table-bordered">
                                    <tbody>
                                    <tr>
                                        <td>售前客服：</td>
                                        <td>客服名称</td>
                                        <td>客服工具</td>
                                        <td>客服账号</td>
                                        <td></td>
                                    </tr>

                                    <foreach name="store[store_presales]" item="v" key="k">
                                        <tr class="presales_tr" style="display:table-row;">
                                            <td></td>
                                            <td><input type="text" class="form-control" placeholder="客服名称"
                                                       name="pre[{$k}][name]" value="{$v['name']}"/></td>
                                            <td>
                                                <select class="form-control" name="pre[{$k}][type]">
                                                    <option value="ww"
                                                    <if condition="$v['type'] eq 'ww'">selected="selected"</if>
                                                    >旺旺</option>
                                                    <option value="qq"
                                                    <if condition="$v['type'] eq 'qq'">selected="selected"</if>
                                                    >QQ</option>
                                                    <!--<option value="IM" <if condition="$v['type'] eq 'IM'">selected="selected"</if> >站内IM</option>-->
                                                </select>
                                            </td>
                                            <td><input type="text" class="form-control" placeholder="客服账号"
                                                       name="pre[{$k}][account]" value="{$v['account']}"/></td>
                                            <td><input type="button" class="btn btn-default del_sales_btn"
                                                       value="- 删除"/></td>
                                        </tr>
                                    </foreach>

                                    <tr class="presales_tr">
                                        <td></td>
                                        <td><input type="text" class="form-control" placeholder="客服名称"
                                                   name="pre[0][name]"></td>
                                        <td>
                                            <select class="form-control" name="pre[0][type]">
                                                <option value="ww">旺旺</option>
                                                <option value="qq">QQ</option>
                                                <option value="IM">站内IM</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" placeholder="客服账号"
                                                   name="pre[0][account]" value=""/></td>
                                        <td><input type="button" class="btn btn-default del_sales_btn" value="- 删除"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td colspan="4" align="left">
                                            <input type="button" class="btn btn-primary" value="+添加售前客服"
                                                   id="presales_btn">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>售后客服：</td>
                                        <td>客服名称</td>
                                        <td>客服工具</td>
                                        <td>客服账号</td>
                                        <td></td>
                                    </tr>
                                    <foreach name="store[store_aftersales]" item="v" key="k">
                                        <tr class="aftersales_tr" style="display:table-row;">
                                            <td></td>
                                            <td><input type="text" class="form-control" placeholder="客服名称"
                                                       name="after[{$k}][name]" value="{$v['name']}"/></td>
                                            <td>
                                                <select class="form-control" name="after[{$k}][type]">
                                                    <option value="ww"
                                                    <if condition="$v['type'] eq 'ww'">selected="selected"</if>
                                                    >旺旺</option>
                                                    <option value="qq"
                                                    <if condition="$v['type'] eq 'qq'">selected="selected"</if>
                                                    >QQ</option>
                                                    <option value="IM"
                                                    <if condition="$v['type'] eq 'IM'">selected="selected"</if>
                                                    >站内IM</option>
                                                </select>
                                            </td>
                                            <td><input type="text" class="form-control" placeholder="客服账号"
                                                       name="after[{$k}][account]" value="{$v['account']}"/></td>
                                            <td><input type="button" class="btn btn-default del_sales_btn"
                                                       value="- 删除"/></td>
                                        </tr>
                                    </foreach>
                                    <tr class="aftersales_tr">
                                        <td></td>
                                        <td><input type="text" class="form-control" placeholder="客服名称"
                                                   name="after[0][name]"></td>
                                        <td>
                                            <select class="form-control" name="after[0][type]">
                                                <option value="ww">旺旺</option>
                                                <option value="qq">QQ</option>
                                                <option value="IM">站内IM</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" placeholder="客服账号"
                                                   name="after[0][account]" value=""/></td>
                                        <td><input type="button" class="btn btn-default del_sales_btn" value="- 删除"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td colspan="4" align="left">
                                            <input type="button" class="btn btn-primary" value="+添加售后客服"
                                                   id="aftersales_btn">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>工作时间：</td>
                                        <td colspan="4" align="left">例：（工作时间 AM 10:00 - PM 18:00）</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td colspan="4" align="left">
                                            <textarea rows="3" cols="100"
                                                      name="working_time">{$store.store_workingtime}</textarea>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row" style="text-align:center;">
                                <a href="javascript:void(0)" onclick="adsubmit()" class="btn btn-success margin">提交</a>
                            </div>
                        </div>
                    </form><!--表单数据-->
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    function adsubmit() {
        // 表单提交
        $('#handlepost').submit();
    }

    $(document).ready(function () {

        // 添加售前客服
        $('#presales_btn').click(function () {
            var count = $('.presales_tr').length; // 当前的数量
            var presales_tr = $(this).parent().parent().prev('.presales_tr'); // 找到这个按钮的所在 tr 的前面的那个tr
            var clont_tr = presales_tr.clone().show(); // 克隆一份出来
            clont_tr.find('input[name="pre\[0\]\[name\]"]').val('售前' + count).attr('name', "pre[" + count + "][name]");// 设置刚刚克隆出来里面 input 的值
            clont_tr.find('select[name="pre\[0\]\[type\]"]').attr('name', "pre[" + count + "][type]");
            clont_tr.find('input[name="pre\[0\]\[account\]"]').attr('name', "pre[" + count + "][account]");
            presales_tr.before(clont_tr); // 在塞到 刚刚前面那个tr 里面去
        });

        // 添加售后客服
        $('#aftersales_btn').click(function () {
            var count = $('.aftersales_tr').length; // 当前的数量
            var aftersales_tr = $(this).parent().parent().prev('.aftersales_tr'); // 找到这个按钮的所在 tr 的前面的那个tr
            var clont_tr = aftersales_tr.clone().show(); // 克隆一份出来
            clont_tr.find('input[name="after\[0\]\[name\]"]').val('售后' + count).attr('name', "after[" + count + "][name]");  // 设置刚刚克隆出来里面 input 的值
            clont_tr.find('select[name="after\[0\]\[type\]"]').attr('name', "after[" + count + "][type]");
            clont_tr.find('input[name="after\[0\]\[account\]"]').attr('name', "after[" + count + "][account]");
            aftersales_tr.before(clont_tr); // 在塞到 刚刚前面那个tr 里面去
        });

        // 删除某一行
        $(document).on('click', '.del_sales_btn', function () {
            $(this).parent().parent().remove();
        });
    });

</script>
</body>
</html>